<script setup>
import {ref} from "vue";
import {post} from "@/request/request";
import {onShow} from "@dcloudio/uni-app";

const addressList = ref([])
const selectedAddress = ref({}) // 初始化为一个空对象

const backClick = () => {
  uni.navigateBack()
}
const address = () => {
  uni.navigateTo({
    url: '/pages/address/components/Address-form'
  })
}

onShow(() => {
  addressData()
})

const addressData = () => {
  post('addressList').then(res => {
    const {data} = res;
    console.log('addressList', data)
    addressList.value = data;
  })
}

const addressClick = (address) => {
  console.log(address)
  uni.setStorageSync('address', address)
  selectedAddress.value = address;
};
// 检查当前项是否被选中
const isSelected = (item) => {
  return selectedAddress.value === item;
};
const deleteAddress = (item) => {
  const id = item.id;
  uni.showModal({
    title: 'ئەسكەرتىش',
    content: 'مۇشۇ ئادرىسنى يۇيۋىتەمسىز؟',
    success: function (res) {
      if (res.confirm) {
        post('addressDelete', {id: id}).then(res => {
          uni.redirectTo({
            url: '/pages/address/address'
          })
        })
      } else {
        // 执行取消后的操作
      }
    }
  })
}

const sureClick = () => {
  if (selectedAddress.value && Object.keys(selectedAddress.value).length > 0) {
    uni.navigateTo({
      url: '/pages/pay/pay'
    })
  } else {
    uni.showToast({
      title: 'ئادرىسنى تاللاڭ',
      icon: 'error',
    })
  }
}

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};
</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" @leftClick="backClick">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image src="/static/search/arrow-left.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="address">
    <view class="add" @click="address">
      <image src="/static/goods-add.png"/>
    </view>
    <view style="padding-bottom: 150rpx;">
      <template v-for="(item, index) in addressList" :key="index">
        <view class="address-list" :style="{ backgroundColor: isSelected(item) ? '#EFF7EE' : '#F7F7F7' }"
              @click="addressClick(item)">
          <view
              style="height: 90%;display: flex;align-items: center;justify-content: space-evenly;flex-direction: column">
            <view class="img">
              <image :src="item.ad_icon"/>
            </view>
            <view>{{ item.ad_state === 1 ? 'باشقا' : item.ad_state === 2 ? 'شىركەت' : 'ئۆي' }}</view>
          </view>
          <view class="list-item-box">
            <view class="list-home">
              <view style="font-size: 32rpx;font-weight: 600;color: #333333">{{ item.ad_recipient_name }}</view>
              <view v-if="item.ad_is_default === true" class="item-label">مۇقىم ئادرىس</view>
              <view class="delte" @click="deleteAddress(item)">
                <image src="/static/address/delte.svg"/>
              </view>
            </view>
            <view style="width: 100%;">
              <image style="width: 18rpx;height: 18rpx" src="/static/phone.svg"/>
              <text style="font-size: 24rpx;margin: 20rpx">{{ item.ad_phone_number }}</text>
            </view>
            <view style="font-size: 22rpx;margin-top: 10rpx;">{{ item.ad_street_address }}</view>
          </view>
        </view>
      </template>
    </view>
    <view class="btn-box">
      <button class="btn" @click="sureClick">جەزىملەش</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    height: 28rpx;
    width: 22rpx;
  }
}

.address {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;

  .add {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;

    image {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .address-list {
    margin: 20rpx;
    width: 690rpx;
    height: 240rpx;
    background: #F7F7F7;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .img {
      width: 126rpx;
      height: 126rpx;
      border-radius: 20rpx;
      background: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 56rpx;
        height: 56rpx;
      }
    }

    .list-item-box {
      padding: 10rpx;
      width: 500rpx;

      .list-home {
        display: flex;
        align-items: center;

        .item-label {
          width: 108rpx;
          height: 38rpx;
          background: #FFF8EE;
          font-size: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 20rpx;
          color: #FF9385;
        }

        .delte {
          position: absolute;
          left: 50rpx;
          width: 32rpx;
          height: 32rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }

  .btn-box {
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      width: 690rpx;
      height: 84rpx;
      background: #43A833;
      color: #FFFFFF;
      border-radius: 20rpx;
    }
  }
}

button::after {
  border: none;
}
</style>
